<template>
  <div class="app-modal">
    <van-dialog v-model="isShow" :show-confirm-button="false">
      <component
        :is="componentName"
        :isModalMode="true"
        :viewdata="viewdata"
        :selectedData="selectedData"
        @viewdataschange="viewDatasChange"
        @close="close"
        class="view-modal-container"
      ></component>
    </van-dialog>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Provide, Emit, Watch } from "vue-property-decorator";
import { Subject } from "rxjs";
@Component({
    components: {}
})
export default class AppModal extends Vue {
    /**
     * 输入组件名
     *
     * @type {string}
     * @memberof AppModal
     */
    @Prop() public componentName!: string;

    /**
     * 视图数据
     *
     * @type {any}
     * @memberof AppModal
     */
    @Prop() public viewdata: any;

    /**
     * 数据选择视图选中项
     *
     * @type {any}
     * @memberof AppModal
     */
    @Prop() public selectedData?: any;

    /**
     * 是否展示
     *
     * @type {boolean}
     * @memberof AppModal
     */
    public isShow: boolean = false;

    /**
     * 可观察对象
     *
     * @type {Subject}
     * @memberof AppModal
     */
    public subject = new Subject();

    /**
     * 显示
     *
     * @memberof AppModal
     */
    public show() {
        this.isShow = true;
        return this.subject;
    }

    /**
     * 隐藏
     *
     * @memberof AppModal
     */
    public hide(item?: any) {
        this.isShow = false;
        this.subject.next(item);
        this.subject.asObservable();
        document.body.removeChild(this.$el);
        this.$destroy();
    }

    /**
     * 视图数据修改
     *
     * @memberof AppModal
     */

    public viewDatasChange($event: any) {
        if (!Object.is($event.action, "load") && !Object.is($event.action, "save")) {
            this.hide($event.data);
        }
    }

    /**
     * 视图关闭
     *
     * @memberof AppModal
     */

    public close(args?: any) {
        args ? this.hide(args.data) : this.hide();
    }
}
</script>
<style lang="less">
.app-modal {
  .van-overlay {
    background-color: rgba(243, 240, 240, 0.7) !important;
  }
  .van-dialog {
    top: 50% !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;
    font-size: 16px;
    border-radius: 0px !important;
    z-index: 2100;
  }
}
</style>
